<template>
  <div>
    <view class="list-wrap u-border-bottom" v-for="(item, index) in list">
      <view class="item">
        <view class="title-wrap">
          <div @tap="handleTreeClick(item)">
            <u-icon
              name="arrow-right"
              color="#ff8441"
              v-if="!item.isOpen && item.children && item.children.length > 0"
            ></u-icon>
            <u-icon
              name="arrow-down"
              color="#ff8441"
              v-if="item.isOpen && item.children && item.children.length > 0"
            ></u-icon>
            <text class="title">{{ item.Name }}</text>
          </div>
          <div class="btn-wrap">
            <text v-if="item.Level < 3" class="add-btn" @tap="onAddClick(item)">添加</text>
            <text class="edit-btn" @tap="onUpdateClick(item)">修改</text>
            <text class="del-btn" @tap="onDeleteClick(item)">删除</text>
          </div>
        </view>
      </view>
      <!-- </u-swipe-action> -->
      <index-chird :list="item.children" v-if="item.isOpen" @reload="$emit('reload')" />
    </view>

    <u-modal
      :title="modalTitle"
      v-model="showModal"
      :show-cancel-button="true"
      confirm-text="保存"
      confirm-color="#ff8441"
      width="700rpx"
      :async-close="true"
      @confirm="handleConfirm"
    >
      <view class="slot-content u-p-l-40 u-p-r-40">
        <u-form class="form" :model="{}" :label-width="150">
          <u-form-item label="分类名称">
            <u-input v-model="category.Name" placeholder="分类名称" :border="true"></u-input>
          </u-form-item>
          <u-form-item label="排序">
            <u-input v-model="category.Sort" type="number" placeholder="请输入序号" :border="true"></u-input>
          </u-form-item>
          <u-form-item label="备注信息">
            <u-input v-model="category.Remark" type="textarea" placeholder="请填写备注" :border="true"></u-input>
          </u-form-item>
        </u-form>
      </view>
    </u-modal>

    <u-modal
      v-model="showConfirm"
      :async-close="true"
      :show-title="false"
      content="是否确认删除"
      :show-cancel-button="true"
      @confirm="handleDelete"
    ></u-modal>
  </div>
</template>

<script>
export default {
  name: 'index-chird',
  props: ['list', 'setId'],
  data() {
    return {
      disabled: false,
      btnWidth: 160,
      show: false,
      options: [
        {
          text: '新增',
          style: {
            backgroundColor: '#007aff'
          }
        },
        {
          text: '编辑',
          style: {
            backgroundColor: '#ff8441'
          }
        },
        {
          text: '删除',
          style: {
            backgroundColor: '#dd524d'
          }
        }
      ],

      showModal: false,
      showConfirm: false,

      currentParentId: '',

      modalTitle: '添加分类',
      category: {
        Id: '',
        SetId: '',
        Parentid: '',
        Name: '',
        Sort: '',
        Remark: ''
      }
    };
  },

  mounted() {},

  methods: {
    handleTreeClick(item) {
      console.log(item);
      item.isOpen = !item.isOpen;
    },

    onAddClick(item) {
      this.modalTitle = '添加分类';
      this.category.Parentid = item.Id;
      this.category.SetId = item.SetId;
      this.showModal = true;
    },

    onUpdateClick(item) {
      this.modalTitle = '编辑分类';
      this.category.Id = item.Id;
      this.category.Name = item.Name;
      this.category.Sort = item.Sort;
      this.category.Remark = item.Remark;
      this.category.Parentid = item.ParentId;
      this.category.SetId = item.SetId;
      this.showModal = true;
    },

    onDeleteClick(item) {
      this.showConfirm = true;
      this.category.Id = item.Id;
    },

    handleDelete() {
      this.$u.api
        .deleteCostsCategory({
          Id: this.category.Id
        })
        .then(res => {
          const { ResultCode, ResultMessage } = res;
          if (ResultCode == 1) {
            this.$emit('reload');
            this.$u.toast(ResultMessage);
            this.showConfirm = false;
          }
        });
    },

    handleConfirm() {
      if (this.category.Id) {
        this.$u.api.updateCostsCategory(this.category).then(res => {
          const { ResultCode, ResultMessage } = res;
          if (ResultCode == 1) {
            this.$emit('reload');
            this.$u.toast(ResultMessage);
            this.showModal = false;
          }
        });
      } else {
        this.$u.api.addCostsCategory(this.category).then(res => {
          const { ResultCode, ResultMessage } = res;
          if (ResultCode == 1) {
            this.$emit('reload');
            this.$u.toast(ResultMessage);
            this.showModal = false;
          }
        });
      }
    },

    click(index, index1) {
      if (index1 == 1) {
        this.list.splice(index, 1);
        this.$u.toast(`删除了第${index}个cell`);
      } else {
        this.list[index].show = false;
        this.$u.toast(`收藏成功`);
      }
    },
    open(index) {
      // 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
      // 原本为'false'，再次设置为'false'会无效
      this.list[index].show = true;
      this.list.map((val, idx) => {
        if (index != idx) this.list[idx].show = false;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.list-wrap {
  padding-left: 36rpx;
  .item {
    display: flex;
    padding: 20rpx 0;
    font-size: 30rpx;
    .title-wrap {
      width: 100%;
      display: flex;
      justify-content: space-between;
      font-size: 30rpx;
      color: #333;
      margin-top: 10rpx;
      .title {
        margin-left: 12rpx;
      }
      .btn-wrap {
        display: flex;
        .add-btn {
          color: #007aff;
          margin-right: 20rpx;
        }
        .edit-btn {
          color: #ff8441;
          margin-right: 20rpx;
        }
        .del-btn {
          color: red;
          margin-right: 20rpx;
        }
      }
    }
  }
}
</style>
